@import "../../sass/_index.scss";

.testImg {
  width: 100%;
  height: 260px;
  // background-image: url(//img14.360buyimg.com/n8/jfs/t3526/33/419567125/151434/7a2b5ffd/5809ae98N6ddbe422.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

// 垂直面板
.card-vertical{
    @include flex(true, false, nowrap);
    
    // 垂直排列内边距 20px * 10px
    @include content-inner(25px, 20px, 25px, 20px);

    .title {
        width: 500px;
    }

    .image {
        width: 160px;
        height: 160px!important;
        margin-right: $h-spacing-md;
        border-radius: $radius-xs;
    }
}

// 水平面版
.card-horizontal {
    @include flex(column);

    .image {
        width: 100%;
        height: 260px!important;
    }
}

.card {
    @include content-padded(false, true, true, true);
    
    border-radius: $radius-md;
    // box-shadow: 0 1px 2px 3px #efefef;
    background-color: $fill-base;
    overflow: hidden;
}

// 垂直面板
.inner-vertical{
    flex: 1;
    justify-content: space-between;
    height: 160px;
    .brief {  
        .caption {
            .icon {
                color: $brand-grey;
            }
        }
    }
}

// 水平面版
.inner-horizontal {
    @include content-inner();
    .brief {  
        margin: 15px 0 5px;
        .caption {
            .icon {
                color: $brand-primary;
            }
        }
    }
}

.inner {
    @include flex(column, false);

    .title {
        // @include flex(column);

        .text {
            font-size: $font-size-base + 2;
            color: $color-text-base;
            text-overflow:ellipsis;
            white-space:nowrap;
            overflow:hidden;
        }

        .paragraph {
            @include flex(true, space-between);

            line-height: 1.6;
            .price {
                font-size: $font-size-base + 2;
                font-weight: 600;
                color: $color-text-base;
            }
        }
    }

    .brief {
        @include flex(true, space-between);
        
        .caption {
            @include flex(true, space-between);

            .icon {
                font-size: $font-size-base;
            }
        }

        .text {
            font-size: $font-size-base;
            color: $color-text-secondary;
        }

    }
}